ongwu 插件 主题 技术 教程 项目

Hexo博客搭建完整教程

2025年01月15日 Hexo , 博客搭建 , 静态网站 , 教程

Hexo博客搭建完整教程

教程概述

本教程将带你从零开始搭建一个基于Hexo的个人技术博客，涵盖环境配置、主题安装、内容管理、部署上线等完整流程。无论你是技术新手还是有一定经验的开发者，都能通过本教程快速搭建出专业的个人博客。

环境准备

1. 安装Node.js

1
2
3
4
5
6
# 下载并安装Node.js (推荐LTS版本)
# 访问 https://nodejs.org/ 下载安装包

# 验证安装
node --version
npm --version

2. 安装Git

1
2
3
4
5
6
7
8
9
10
# Windows: 下载Git for Windows
# macOS: 使用Homebrew安装
brew install git

# Linux: 使用包管理器安装
sudo apt-get install git  # Ubuntu/Debian
sudo yum install git      # CentOS/RHEL

# 验证安装
git --version

3. 配置Git用户信息

1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

Hexo安装与初始化

1. 安装Hexo

1
2
3
4
5
# 全局安装Hexo CLI
npm install -g hexo-cli

# 验证安装
hexo --version

2. 创建博客项目

1
2
3
4
5
6
# 创建博客目录
hexo init my-blog
cd my-blog

# 安装依赖
npm install

3. 项目结构说明

1
2
3
4
5
6
7
8
9
my-blog/
├── _config.yml          # 站点配置文件
├── package.json         # 项目依赖配置
├── scaffolds/           # 文章模板
├── source/              # 源文件目录
│   ├── _posts/          # 文章目录
│   └── _drafts/         # 草稿目录
├── themes/              # 主题目录
└── public/              # 生成的静态文件

基础配置

1. 站点配置 (_config.yml)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 站点信息
title: 我的技术博客
subtitle: 分享技术，记录成长
description: 个人技术博客，记录学习心得和项目经验
author: 你的名字
language: zh-CN
timezone: Asia/Shanghai

# URL配置
url: https://your-username.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# 目录配置
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories

# 写作配置
new_post_name: :title.md
default_layout: post
titlecase: false
external_link:
  enable: true
  field: site
  exclude: ''

# 分页配置
per_page: 10
pagination_dir: page

# 主题配置
theme: landscape

# 部署配置
deploy:
  type: git
  repo: https://github.com/your-username/your-username.github.io.git
  branch: main

2. 安装部署插件

1
2
# 安装Git部署插件
npm install hexo-deployer-git --save

主题安装与配置

1. 选择主题

推荐几个优秀的Hexo主题：

  • Next: 简洁优雅，功能丰富
  • Butterfly: 现代化设计，动画效果
  • Fluid: 响应式设计，适合技术博客
  • Ongwu: 本文使用的主题

2. 安装主题

1
2
3
4
5
# 以Next主题为例
git clone https://github.com/next-theme/hexo-theme-next themes/next

# 或者使用npm安装
npm install hexo-theme-next

3. 配置主题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# _config.yml
theme: next

# themes/next/_config.yml
# 主题配置文件
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

# 侧边栏配置
sidebar:
  position: left
  display: post

# 社交链接
social:
  GitHub: https://github.com/your-username || fab fa-github
  Email: mailto:your-email@example.com || fa fa-envelope

内容管理

1. 创建文章

1
2
3
4
5
6
7
8
# 创建新文章
hexo new post "文章标题"

# 创建草稿
hexo new draft "草稿标题"

# 发布草稿
hexo publish draft "草稿标题"

2. 文章格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
---
title: 文章标题
date: 2025-01-15 10:00:00
categories: 
  - 分类1
  - 分类2
tags:
  - 标签1
  - 标签2
description: 文章描述
---

# 文章内容

这里是文章的正文内容，支持Markdown语法。

## 二级标题

- 列表项1
- 列表项2

```代码块
console.log('Hello World');

3. 创建页面

1
2
3
4
5
6
7
8
# 创建关于页面
hexo new page about

# 创建标签页面
hexo new page tags

# 创建分类页面
hexo new page categories

本地开发

1. 启动开发服务器

1
2
3
4
5
6
7
8
# 启动本地服务器
hexo server

# 指定端口
hexo server -p 4000

# 后台运行
nohup hexo server &

2. 生成静态文件

1
2
3
4
5
6
7
8
# 生成静态文件
hexo generate

# 清理缓存后生成
hexo clean && hexo generate

# 监听文件变化
hexo generate --watch

部署上线

1. GitHub Pages部署

1
2
3
4
5
6
# 配置GitHub仓库
# 1. 在GitHub创建仓库 your-username.github.io
# 2. 配置SSH密钥

# 部署到GitHub Pages
hexo deploy

2. 其他部署方式

1
2
3
4
5
6
7
8
# 部署到Vercel
npm install -g vercel
vercel --prod

# 部署到Netlify
# 1. 连接GitHub仓库
# 2. 设置构建命令: hexo generate
# 3. 设置发布目录: public

高级功能

1. 搜索功能

1
2
# 安装搜索插件
npm install hexo-generator-search --save
1
2
3
4
5
6
# _config.yml
search:
  path: search.xml
  field: post
  content: true
  format: html

2. 评论系统

1
2
3
4
5
6
7
8
# 配置Gitalk评论
gitalk:
  enable: true
  githubID: your-github-id
  repo: your-blog-repo
  ClientID: your-github-client-id
  ClientSecret: your-github-client-secret
  adminUser: your-github-username

3. 统计功能

1
2
3
4
5
# 配置百度统计
baidu_analytics: your-baidu-analytics-id

# 配置Google Analytics
google_analytics: your-google-analytics-id

性能优化

1. 图片优化

1
2
# 安装图片处理插件
npm install hexo-asset-image --save

2. 代码压缩

1
2
# 安装压缩插件
npm install hexo-all-minifier --save

3. CDN加速

1
2
3
4
# 配置CDN
jsdelivr:
  enable: true
  cdn: https://cdn.jsdelivr.net/npm

常见问题解决

1. 部署失败

1
2
3
4
5
6
7
8
# 检查Git配置
git config --list

# 检查SSH密钥
ssh -T git@github.com

# 清理缓存
hexo clean

2. 主题显示异常

1
2
3
4
5
6
# 检查主题配置
cat themes/next/_config.yml

# 重新安装主题
rm -rf themes/next
git clone https://github.com/next-theme/hexo-theme-next themes/next

3. 文章不显示

1
2
3
4
5
6
# 检查文章格式
hexo new post "测试文章"

# 检查分类和标签
hexo new page categories
hexo new page tags

维护与更新

1. 定期更新

1
2
3
4
5
6
# 更新Hexo
npm update hexo-cli -g

# 更新主题
cd themes/next
git pull origin master

2. 备份数据

1
2
3
4
5
6
7
# 备份整个项目
tar -czf blog-backup.tar.gz my-blog/

# 备份到Git
git add .
git commit -m "备份博客数据"
git push origin main

总结

通过本教程，你已经学会了：

  1. 环境配置：安装Node.js、Git等必要工具
  2. 项目初始化：创建和配置Hexo博客项目
  3. 主题安装：选择和配置合适的博客主题
  4. 内容管理：创建和管理博客文章
  5. 本地开发：启动开发服务器进行调试
  6. 部署上线：将博客部署到GitHub Pages等平台
  7. 功能扩展：添加搜索、评论、统计等功能
  8. 性能优化：提升博客加载速度和用户体验

现在你可以开始创建自己的技术博客，分享你的知识和经验了！

持续学习和实践是提升技术博客质量的关键。

文章评论 (0)